<template>
  <div class="t-swipe" v-if="tabList.length!=0">
    <van-swipe indicator-color="var(--van-primary-color)">
      <van-swipe-item v-for="(swipeItem,index) in tabList" :key="index">
        <template  v-for="(item,index) in swipeItem" :key="index">
          <slot :data="item"></slot>
        </template>
      </van-swipe-item>
    </van-swipe>
  </div>
</template>

<script lang="ts">
import { defineComponent ,watch,onMounted,reactive} from 'vue'
export default defineComponent({
  name: 'tSwipe',
  props:{
    list:Array,
    rowNumber:{
      type:Number,
      default:4
    }
  },
  setup (props) {
    let {list=[],rowNumber} = props;
    const tabList:Array<any> = reactive([]);
    const refresh = function(_list:Array<any>=[]){
      for(let i = 0; i < _list.length;i+=rowNumber){
        let arr:Array<any> = [],key=0;
        while(key < rowNumber && i+key < _list.length){
          arr.push(_list[i+key]);
          key++;
        }
        tabList.push(arr);
      }
    };
    watch(()=>props.list,function(data,prev){
      refresh(data);
    })
    onMounted(()=>{
      refresh(list);
    })
    return {
      tabList
    }
  }
})
</script>
<style lang="scss">
  .t-swipe{
    padding: 10px 15px;
    .van-swipe-item{
      display: flex;
      justify-content: space-evenly;
    }
  }
</style>